<template>
  <div>
    <div class="usermember-info-temp">
      <div class="header">
        <div class="header-img" v-if="ZRSUserInfo">
          <img :src="ZRSUserInfo.icon" alt="">
        </div>
        <div style="padding-left:0.2rem;">
          <div class="header-name">{{userInfo.realname}}</div>
          <div class="header-gz">关注:{{addtime | dateFrom}}</div>
        </div>
      </div>
      <van-form @submit="onSubmit" ref="userForm">
        <van-field required v-model="userInfo.realname" name="姓名" label="姓名" placeholder="姓名" :rules="[{ required: true, message: '请填写用姓名' }]" />
        <van-field required v-model="userInfo.mobile" type="number" name="手机号码" label="手机号码" placeholder="手机号码" :rules="[{ regMobild, message: '手机号码格式错误' }]" />
        <van-field required v-model="userInfo.adviser" name="顾问老师姓名" label="顾问老师姓名" placeholder="顾问老师姓名" :rules="[{ required: true, message: '请填写顾问老师姓名' }]" />
        <van-field required v-model="userInfo.adviser_mobile" name="顾问老师手机号" label="顾问老师手机号" placeholder="顾问老师手机号" :rules="[{ regMobild, message: '请填写顾问老师手机号' }]" />
        <van-field required v-model="userInfo.descp" name="所属博瑞智地区" label="所属博瑞智地区" placeholder="所属博瑞智地区" :rules="[{ required: true, message: '所属博瑞智地区' }]" />
        <div style="margin: 0.6rem 0.1rem;">
          <van-button block type="primary" native-type="submit">提交信息</van-button>
        </div>
      </van-form>
    </div>
    <footers />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { Toast, Form, Field, Button, RadioGroup, Radio } from 'vant';
import utils from "@/utils/utils";
export default {
  props: {
    callback: {
      type: Function,
      default: function () { return ''; }
    }
  },
  components: {
    [Field.name]: Field, [Form.name]: Form, [Button.name]: Button, [RadioGroup.name]: RadioGroup, [Radio.name]: Radio
  },
  computed: {
    ...mapState({
      ZRSUserInfo: state => state.app.ZRSUserInfo
    }),
  },
  data: function () {
    return {
      regMobild: /^1\d{10}$/,
      userInfo: {
        realname: '',
        mobile: '',
        adviser: '',
        adviser_mobile: '',
        descp: ''
      },
      addtime: ''
    };
  },
  filters: {
    dateFrom(e) {
      if (!e) return '';
      return utils.dateFormat(e, 'cn');
    }
  },
  mounted() {
    if (this.ZRSUserInfo) {
      this.userInfo.realname = this.ZRSUserInfo.realname || '';
      this.userInfo.mobile = this.ZRSUserInfo.mobile || '';
      this.userInfo.adviser = this.ZRSUserInfo.adviser || '';
      this.userInfo.adviser_mobile = this.ZRSUserInfo.adviser_mobile || '';
      this.userInfo.descp = this.ZRSUserInfo.descp || '';
      this.addtime = this.ZRSUserInfo.addtime || '';
    }
  },
  methods: {
    onSubmit() {
      this.$refs['userForm'].validate().then(() => {
        const toast = this.$toast.loading('加载中...');
        this.$http.post(this.$API.SET_USERINFO, this.userInfo)
          .then((res) => {
            toast.clear();
            if (res.code == 1) {
              if (res.data && res.data.own) {
                this.getBaseUserInfo(res.data.own)
              }
            } else {
              this.$notify({ type: 'warning', message: res.msg });
            }
          }).catch(err=>{
            toast.clear();
          })
      }).catch(() => {
        this.$notify({ type: 'warning', message: '有必填项未填' });
      });
    },
    getBaseUserInfo(openid) {
      this.$http
        .post(this.$API.GET_APP_USERINFO, { openid })
        .then((res) => {
          if (res.code == 1) {
            if (res.data && res.data.own) {
              this.$store.dispatch('app/setZrsUserInfo', res.data);
            }
            this.$toast.success("操作成功");
            setTimeout(() => {
              this.$router.back();
            }, 1500);
          }
        });
    },
    getUrlParam(name) {   //name为要获取的参数名
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var rrr = decodeURIComponent(window.location.search);
      var r = rrr.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
  },
};
</script>

<style lang="less">
.usermember-info-temp {
  background: #fff;
  padding: 0.2rem;
  .header {
    position: relative;
    padding: 0.2rem 0;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    .header-img {
      display: flex;
      justify-content: center;
      img {
        height: 1rem;
        width: 1rem;
        object-fit: cover;
      }
    }
    .header-name {
      padding-top: 0.1rem;
      font-size: 0.32rem;
      color: #333;
    }
    .header-gz {
      padding-top: 0.2rem;
      font-size: 0.24rem;
      color: #888;
    }
  }
  /* 插件部分样式重置 */
  .van-cell {
    padding: 0.2rem 0.3rem;
    font-size: 0.32rem;
    line-height: 0.48rem;
    &:after {
      border-color: #ddd;
    }
    .van-field__label {
      width: 2rem;
    }
  }

  .van-cell__title {
    font-size: 0.32rem;
  }
}
</style>